<template>
	<scroll-view class="account-main" scroll-y>
		<view class="ui-flex header">
			<view class="my-flex content-center">
				<view class="text-box">
					<view>总收入</view>
					<view>{{ sumMap['00000000'].inmoney }}</view>
				</view>
			</view>
			<view class="title-circle">
				<text class="title-text" style="top:12px;">净资产</text>
				<text class="title-text" style="bottom: 15px;">{{ moneySum }}</text>
				<view class="color-circle" :style="{ height: colorHeight }"></view>
			</view>
			<view class="my-flex content-center">
				<view class="text-box">
					<view>总支出</view>
					<view>{{ sumMap['00000000'].outmoney }}</view>
				</view>
			</view>
		</view>
		<template v-for="(item, index) in indexData">
			<view :key="'line-' + index" class="ui-flex">
				<view class="my-flex"></view>
				<view class="line"></view>
				<view class="my-flex"></view>
			</view>
			<view :key="'date-' + index" v-if="item.showDate" class="item month ui-flex">
				<view class="my-flex left">{{ item.month }}月</view>
				<view class="view"></view>
				<view class="my-flex right"></view>
			</view>
			<view :key="'date-line' + index" v-if="item.showDate" class="ui-flex">
				<view class="my-flex"></view>
				<view class="line"></view>
				<view class="my-flex"></view>
			</view>
			<view :key="'time-' + index" v-if="item.showTime" class="item day ui-flex">
				<view class="my-flex left content-center">
					收入 {{ sumMap[item.year + item.month + item.day].inmoney }}
				</view>
				<view class="view">{{ item.day }}日</view>
				<view class="my-flex right content-center">
					支出 {{ sumMap[item.year + item.month + item.day].outmoney }}
				</view>
			</view>
			<view :key="'time-line' + index" v-if="item.showTime" class="ui-flex">
				<view class="my-flex"></view>
				<view class="line"></view>
				<view class="my-flex"></view>
			</view>
			<view :key="'data-' + index" class="item info ui-flex">
				<view class="my-flex left content-center">
					<view v-show="item.type == 0 && !!item.remark">
						<view class="title">{{ item.title }} {{ item.money }}</view>
						<view class="remark">{{ item.remark }}</view>
					</view>
					<view v-show="item.type == 0 && !item.remark">
						{{ item.title }} {{ item.money }}
					</view>
				</view>
				<view
					@longtap="itemTap(item)"
					class="view content-center"
					:style="{ background: item.color }"
				>
					<faicon type="star" color="#fff" size="20"></faicon>
				</view>
				<view class="my-flex right content-center">
					<view v-show="item.type == 1 && !!item.remark">
						<view class="title">{{ item.title }} {{ item.money }}</view>
						<view class="remark">{{ item.remark }}</view>
					</view>
					<view v-show="item.type == 1 && !item.remark">
						{{ item.title }} {{ item.money }}
					</view>
				</view>
			</view>
		</template>
		<view class="uni-load-more" v-show="loadingType != 2">
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</view>
		<view class="ui-flex" v-show="loadingType == 2">
			<view class="my-flex"></view>
			<view class="line"></view>
			<view class="my-flex"></view>
		</view>
		<view class="item info ui-flex" v-show="loadingType == 2">
			<view class="my-flex"></view>
			<view class="view content-center" style="background-color: rgb(255, 255, 255);">
				<faicon type="gittip" color="#f66" size="35"></faicon>
			</view>
			<view class="my-flex"></view>
		</view>

		<view v-show="loadingType == 2" class="bottom content-center">
			<view>
				<view>{{ userDate }}</view>
				<view>您开启了记账的旅程</view>
			</view>
		</view>
		
		<view class="add-btn content-center" @tap="goAdd">
			<faicon type="plus" color="#fff" size="22"></faicon>
		</view>
	</scroll-view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more';
import { mapActions, mapGetters } from 'vuex';
import '@/utils/dateFormat';
export default {
	data() {
		return {
			colorHeight: '20%',
			show: false,
			pageIndex: 0,
			pageSize: 10,
			loadingType: 1,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			list: [],
			indexData: [],
			sumMap: {
				'00000000': {
					inmoney: '0',
					outmoney: '0'
				}
			},
			userDate: ''
		};
	},
	async onLoad() {
		this.userDate = new Date(this.userInfo.create_date).Format('yyyy年MM月dd日');
		this.showLoading('加载中..', true);
		await this.initData();
		this.hideLoading('加载中..', true);
	},
	onReachBottom() {
		if (this.loadingType !== 0) {
			return;
		}
		this.loadMore();
	},
	async onPullDownRefresh() {
		await this.initData();
		uni.stopPullDownRefresh()
	},
	methods: {
		goAdd(){
			uni.navigateTo({ url: '/pages/account-add/account-add' });
		},
		toThousands(num) {
			let temp = Number(num || 0)
				.toFixed(2)
				.split('.');
			let flag = temp.length == 2;
			num = Number(temp[0]);
			let numTemp = (num || 0).toString(),
				result = '';
			while (numTemp.length > 3) {
				result = ',' + numTemp.slice(-3) + result;
				numTemp = numTemp.slice(0, numTemp.length - 3);
			}
			if (numTemp) {
				result = numTemp + result;
			}
			return flag ? result + '.' + temp[1] : result;
		},
		updateIndexData() {
			let result = this.list;
			let timeTemp = '';
			let dataTemp = '';
			result.forEach((item, index) => {
				if (index == 0 || timeTemp != item.year + item.month + item.day) {
					item.showTime = true;
					timeTemp = item.year + item.month + item.day;
				}
				if (index == 0 || dataTemp != item.year + item.month) {
					item.showDate = true;
					dataTemp = item.year + item.month;
				}
				item.money = this.toThousands(item.money);
				item.remark = this.showEmoji(item.remark);
			});
			this.indexData = result;
		},
		itemTap(item) {
			uni.showActionSheet({
				itemList: ['编辑', '删除'],
				success: e => {
					if (e.tapIndex == 0) {
						// 编辑
						uni.navigateTo({ url: '/pages/account-add/account-add?id=' + item.item_id });
					} else if (e.tapIndex == 1) {
						// 删除
						this.msg('点击了删除选项');
					}
				}
			});
		},
		initData() {
			return new Promise((resolve, reject) => {
				this.pageIndex = 0;
				this.list = [];
				this.loadingType = 0;
				this.getSumData().then(() => {
					this.loadingType = 1;
					this.getList().then(() => {
						this.loadingType = this.loadingType == 2 ? 2 : 0;
						resolve();
					});
				});
			});
		},
		loadMore() {
			this.loadingType = 1;
			this.getList().then(() => {
				this.loadingType = this.loadingType == 2 ? 2 : 0;
			});
		},
		getList() {
			return new Promise((resolve, reject) => {
				this.$api['fun/accountListPage']({
					index: this.pageIndex * this.pageSize,
					size: this.pageSize
				}).then(({ data, code, msg }) => {
					if (code == 0) {
						this.list = this.list.concat(data);
						if (data.length < this.pageSize) this.loadingType = 2;
						else this.pageIndex++;
						this.updateIndexData();
					} else {
						this.msg('获取数据出错');
					}
					resolve();
				});
			});
		},
		getSumData() {
			return new Promise((resolve, reject) => {
				this.$api['fun/accountIndexSum']().then(({ data, code, msg }) => {
					if (code == 0) {
						data.forEach((item, index) => {
							this.sumMap[item.times] = item;
						});
						if (!this.sumMap['00000000'].inmoney)
							this.sumMap['00000000'].inmoney = '0.00';
						if (!this.sumMap['00000000'].outmoney)
							this.sumMap['00000000'].outmoney = '0.00';
					} else {
						this.msg('获取数据出错');
					}
					resolve();
				});
			});
		}
	},
	computed: {
		...mapGetters(['wxInfo', 'userInfo']),
		moneySum() {
			return (
				Number(this.sumMap['00000000'].inmoney.replace(/,/g, '')) -
				Number(this.sumMap['00000000'].outmoney.replace(/,/g, ''))
			).toFixed(2);
		}
	},
	
	components: { uniLoadMore }
};
</script>

<style lang="scss">
.account-main {
	width: 100%;
	background: #fff;
	.header {
		text-align: center;
		padding-top: 10px;
		.title-circle {
			width: 60px;
			height: 60px;
			background: #d1cfcf;
			border-radius: 50%;
			display: inline-block;
			position: relative;
			overflow: hidden;
			z-index: 5;
			.color-circle {
				background: #4f77e6;
				width: 60px;
				height: 60px;
				position: absolute;
				bottom: 0;
				z-index: 4;
				left: 0;
			}
			.title-text {
				position: absolute;
				left: 0;
				right: 0;
				z-index: 5;
				color: #fff;
			}
		}
		.text-box {
			font-size: 15px;
			color: #636163;
			> view:first-child {
				margin-bottom: 3px;
			}
		}
	}
	.line {
		height: 36px;
		margin: 2px 0;
		width: 1px;
		background: #d6d3d6;
	}
	.item {
		font-size: 15px;
		.left {
			text-align: right;
			margin-right: 12px;
			color: #636163;
			justify-content: flex-end;
		}
		.right {
			text-align: left;
			margin-left: 12px;
			color: #636163;
			justify-content: flex-start;
		}
		&.month {
			height: 9px;
			.view {
				padding: 3px;
				border: 1px solid #d6d3d6;
				border-radius: 50%;
				width: 1px;
				height: 1px;
				background-color: #efefef;
			}
			.left {
				margin-top: -4.3px;
				font-size: 13px;
			}
		}

		&.day {
			height: 33px;
			.view {
				border: 1px solid #d6d3d6;
				border-radius: 50%;
				width: 31px;
				height: 31px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #d6d3d6;
				color: #fff;
			}
		}
		&.info {
			height: 33px;
			position: relative;
			.view {
				// border: 1px solid #d6d3d6;
				border-radius: 50%;
				width: 33px;
				height: 33px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #f66;
				color: #fff;
			}
			.btn-left {
				position: absolute;
				left: 15px;
				top: 0;
				border-radius: 50%;
				width: 33px;
				height: 33px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #f66;
				color: #fff;
			}
			.btn-right {
				position: absolute;
				right: 15px;
				top: 0;
				border-radius: 50%;
				width: 33px;
				height: 33px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #66f;
				color: #fff;
			}
			.title {
			}
			.remark {
				font-size: 12px;
			}
		}
	}
	.bottom {
		padding: 30px 0;
		font-size: 15px;
		view {
			text-align: center;
		}
	}
	.uni-load-more {
		padding: 10px;
	}
	.add-btn{
		border-radius: 50%;
		width: 60px;
		height: 60px;
		background: #4f77e6;
		position: fixed;
		right: 25px;
		bottom: 25px;
		&:active{
			background: rgba(0,0,0,.3);
		}
	}
}
</style>
